<template>
	<view class="box">
		<text class="title">途经点</text>
		<text class="def-text"  v-if="config.list.length==0">~我们一起出行旅游吧~</text>
		<view class="points-list" v-if="config.list.length>0">
			<view v-for="(item,index) in config.list" :key='index'>
				<text>{{item}}</text>
				<text  v-if="config.list.length!=index+1">→</text>
			</view>
		</view>
		<text class="sum">共计<text class="num">{{config.list.length}}</text>处景点</text>
		<view class="btn">生成路线</view>
	</view>
</template>

<script>
	export default{
		props:{
			config:{
				type:Object,
				default:function(){
					return{
						list:[],
					}
				}
			}
		},
		data(){
			return{
				
			}
		},
		computed: {
			thisList(){
				console.log(this.config.list)
				return this.config.list
			}
		},
	}
</script>

<style scoped>
	.box{
		width: 600upx;
		height: auto;
		display: table;
		border-radius: 30upx;
		border-radius: 30upx;
		background: rgba(0,0,0,0.8);
		padding-top: 28upx;
		position: fixed;
		padding-bottom: 24upx;
		top: 150upx;
		left: 75upx;
	},
	.title{
		color: #FFFFFF;
		display: block;
		font-size: 28upx;
		margin-left: 25upx;
	}
	.def-text{
		color: #FFFFFF;
		display: block;
		font-size: 28upx;
		margin-left: 48upx;
		margin-top: 22upx;
	}
	.sum{
		color: #FFFFFF;
		display: block;
		font-size: 28upx;
		margin-left: 48upx;
		margin-top: 42upx;
	}
	.num{
		color: #FF8585;
	}
	.btn{
		width: 140upx;
		height: 40upx;
		border-radius: 30upx;
		text-align: center;
		line-height: 40upx;
		font-size: 24upx;
		right: 20upx;
		bottom: 20upx;
		color: #FFFFFF;
		position: absolute;
		float: left;
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
		margin-left: 12upx;
	}
	.points-list{
		width: 500upx;
		margin-left: 50upx;
		height: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		color: #FFFFFF;
		font-size: 28upx;
	}
	.points-list text{
		line-height: 50upx;
		padding: 0 4upx;
	}
</style>
